<template>
    <div id="jk-dialog">
        <el-dialog 
            title="车辆监控详情" 
            v-model="visible" 
            width="90%" 
            top="5vh" 
            :close-on-click-modal="false"
            :modal-append-to-body="false" 
            append-to-body 
            custom-class="monitor-dialog" 
            @close="handleClose"
            @opened="handleOpened">
            <div class="dialog-content">
                <iframe 
                    ref="monitorIframe"
                    :src="url" 
                    width="100%" 
                    height="900" 
                    frameborder="0" 
                    style="border: none;"
                    @load="handleIframeLoad">
                </iframe>
            </div>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, watch, onMounted, onUnmounted } from 'vue'

// 定义props
const props = defineProps({
    modelValue: {
        type: Boolean,
        default: false
    },
    url: {
        type: String,
        default: 'http://139.129.18.80:8083/'
    },
    // 新增：登录信息
    authToken: {
        type: String,
        default: ''
    },
    userInfo: {
        type: Object,
        default: () => ({})
    }
})

const emit = defineEmits(['update:modelValue', 'close', 'opened', 'auth-required'])

const visible = ref(false)
const monitorIframe = ref(null)
let messageListener = null

// 监听props变化
watch(() => props.modelValue, (newVal) => {
    visible.value = newVal
})

watch(visible, (newVal) => {
    emit('update:modelValue', newVal)
})

// 发送认证信息到iframe
const sendAuthInfo = () => {
    if (!monitorIframe.value || !props.authToken) return
    
    setTimeout(() => {
        try {
            const iframeWindow = monitorIframe.value.contentWindow
            iframeWindow.postMessage({
                type: 'AUTH_INFO',
                data: {
                    token: props.authToken,
                    userInfo: props.userInfo,
                    timestamp: Date.now()
                }
            }, '*')
            console.log('认证信息已发送到iframe')
        } catch (error) {
            console.error('发送认证信息失败:', error)
        }
    }, 1000) // 延迟1秒确保iframe完全加载
}

// 监听来自iframe的消息
const setupMessageListener = () => {
    messageListener = (event) => {
        console.log('收到来自iframe的消息:', event.data)
        
        if (event.data && event.data.type === 'AUTH_REQUIRED') {
            // iframe要求认证
            emit('auth-required')
            console.log('iframe要求重新认证')
        } else if (event.data && event.data.type === 'AUTH_SUCCESS') {
            console.log('iframe认证成功')
        }
    }
    window.addEventListener('message', messageListener)
}

// 移除消息监听
const removeMessageListener = () => {
    if (messageListener) {
        window.removeEventListener('message', messageListener)
        messageListener = null
    }
}

const open = () => {
    visible.value = true
    console.log('监控弹窗已开启')
}

const close = () => {
    visible.value = false
    console.log('监控弹窗已关闭')
}

const handleClose = () => {
    emit('close')
}

const handleOpened = () => {
    emit('opened')
    console.log('监控弹窗已完全打开')
    // 弹窗完全打开后发送认证信息
    sendAuthInfo()
}

const handleIframeLoad = () => {
    console.log('监控页面加载完成')
    // 页面加载完成后也尝试发送认证信息
    sendAuthInfo()
}

// 新增：刷新iframe
const refreshIframe = () => {
    if (monitorIframe.value) {
        monitorIframe.value.src = monitorIframe.value.src
        console.log('iframe已刷新')
    }
}

defineExpose({
    open,
    close,
    refreshIframe,
    sendAuthInfo
})

onMounted(() => {
    setupMessageListener()
})

onUnmounted(() => {
    removeMessageListener()
})
</script>

<style lang="scss">
/* 使用全局样式确保能覆盖 Element Plus 默认样式 */
#jk-dialog .el-dialog {
    background: rgba(0, 0, 0, 0.8) !important;
    border: 1px solid rgba(0, 212, 255, 0.3) !important;
    border-radius: 8px !important;
}

/* 弹窗头部样式 */
#jk-dialog .el-dialog .el-dialog__header {
    background: rgba(0, 0, 0, 0.5) !important;
    border-bottom: 1px solid rgba(0, 212, 255, 0.3) !important;
    padding: 15px 20px !important;
    margin: 0 !important;
}

#jk-dialog .el-dialog .el-dialog__title {
    color: #00d4ff !important;
    font-size: 18px !important;
    font-weight: bold !important;
}

#jk-dialog .el-dialog .el-dialog__headerbtn {
    top: 15px !important;
}

#jk-dialog .el-dialog .el-dialog__close {
    color: #00d4ff !important;
    font-size: 20px !important;
}

#jk-dialog .el-dialog .el-dialog__close:hover {
    color: #ffffff !important;
}

/* 弹窗内容区域样式 */
#jk-dialog .el-dialog .el-dialog__body {
    padding: 20px !important;
    background: rgba(0, 0, 0, 0.8) !important;
}

/* 对话框内容样式 */
.dialog-content {
    width: 100%;
    height: 600px;
}

.dialog-content iframe {
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
}
</style>